<script>
/* eslint-disable */
import CoreTable from "./components";
export default {
  name: "OperTable",
  inheritAttrs: false,
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {
    console.log("this.$attrs", this.$attrs);
  },
  watch: {},
  methods: {
    choice(item, row, col, e = null) {
      this.$emit("choice", { item, row, col, e });
    },
    toggle(val) {
      this.$emit("toggle", val);
    }
  },
  components: {
    CoreTable
  }
};
</script>
<template>
  <core-table ref="coreTable" v-bind="$attrs" v-on="$listeners">
    <template slot-scope="slotProps">
      <span v-if="slotProps.column.oper && slotProps.column.oper.length > 0">
        <span v-for="(item, index) in slotProps.column.oper" :key="index">
          <span
            v-if="item.type === 'btn' && slotProps.scope.row[item.event]"
            @click.stop="choice(item, slotProps.scope.row, slotProps.column)"
          >
            <i
              v-if="
                item.event === 'idCardFrontPic' ||
                  item.event === 'idCardBackPic' ||
                  item.event === 'idcardBackPic' ||
                  item.event === 'idcardFrontPic'
              "
            >
              <img :src="require('@/assets/img/' + item.icon)" class="img" />
            </i>
            <i v-else :class="item.icon" class="blue"></i>
            <a class="oper-table-pic">{{ item.name }}</a></span
          >
          <span
            :class="
              slotProps.scope.row.orgClass === 20
                ? 'oper-table-btn'
                : 'oper-table-btnn'
            "
            v-if="item.type === 'btnn'"
            @click.stop="choice(item, slotProps.scope.row, slotProps.column)"
          >
            {{ item.name }}</span
          >
          <span
            class="oper-table-btn"
            v-if="item.type === 'statusBtn'"
            @click.stop="choice(item, slotProps.scope.row, slotProps.column, $event)"
          >
            {{
              slotProps.scope.row[slotProps.column.prop] === 0 ? "启用" : "停用"
            }}</span
          >
          <input v-if="item.type === 'input'" v-model="item.text" />
          <CoreSwitch
            v-if="item.type === 'switch'"
            @toggle="toggle"
            :status="$attrs['status'] || true"
          >
            {{ slotProps.scope.row[slotProps.column.prop] }}
          </CoreSwitch>
          <span v-if="item.type === 'pop'">
            <span
              v-if="
                slotProps.scope.row[slotProps.column.prop] ===
                  slotProps.column.statusCode ||
                  slotProps.scope.row[slotProps.column.prop] ===
                    slotProps.column.statusPass ||
                  slotProps.scope.row[slotProps.column.prop] ===
                    slotProps.column.statusNo ||
                  slotProps.scope.row[slotProps.column.prop] ===
                    slotProps.column.statusIng ||
                  slotProps.scope.row[slotProps.column.prop] ===
                    slotProps.column.statusStop ||
                  slotProps.scope.row[slotProps.column.prop] ===
                    slotProps.column.statusBrown ||
                  slotProps.scope.row[slotProps.column.prop] ===
                    slotProps.column.statusSpecial
              "
              :class="
                slotProps.scope.row[slotProps.column.prop] ===
                slotProps.column.statusCode
                  ? 'red'
                  : '' ||
                    slotProps.scope.row[slotProps.column.prop] ===
                      slotProps.column.statusPass
                  ? 'green'
                  : '' ||
                    slotProps.scope.row[slotProps.column.prop] ===
                      slotProps.column.statusNo
                  ? 'blue'
                  : '' ||
                    slotProps.scope.row[slotProps.column.prop] ===
                      slotProps.column.statusIng
                  ? 'black'
                  : '' ||
                    slotProps.scope.row[slotProps.column.prop] ===
                      slotProps.column.statusStop
                  ? 'stop'
                  : '' ||
                    slotProps.scope.row[slotProps.column.prop] ===
                      slotProps.column.statusSpecial
                  ? 'stop'
                  : '' ||
                    slotProps.scope.row[slotProps.column.prop] ===
                      slotProps.column.statusBrown
                  ? 'brown'
                  : ''
              "
              @click.stop="choice(item, slotProps.scope.row, slotProps.column)"
            >
              {{
                slotProps.scope.row[slotProps.column.prop]
                  | statusStr(slotProps.scope.column.property)
              }}
              <el-popover
                :trigger="item.trigger || 'hover'"
                width="150"
                placement="top"
                v-if="
                  (slotProps.scope.row[slotProps.column.prop] ===
                    slotProps.column.statusCode && slotProps.scope.row[item.remark])
                "
              >
                <p>
                  {{ slotProps.scope.row[item.remark] }}
                </p>
                <i class="el-icon-warning red" slot="reference"> </i>
              </el-popover>
            </span>
          </span>
          <a
            type="text"
            class="oper-links"
            v-if="item.type === 'link'"
            @click.stop="choice(item, slotProps.scope.row, slotProps.column)"
            >{{ slotProps.scope.row[slotProps.column.prop] }}</a
          >
          <span
            v-if="item.type === 'status'"
            @click.stop="choice(item, slotProps.scope.row, slotProps.column)"
            >{{ slotProps.scope.row[slotProps.column.prop] }}</span
          >
        </span>
      </span>
    </template>
  </core-table>
</template>
<style lang="scss" scoped>
.oper-links {
  cursor: pointer;
  color: #007fff;
}
.img {
  width: 14px;
  height: 14px;
  margin-top: -4px;
}
.oper-table-pic {
  cursor: pointer;
  color: #007fff;
  margin-left: 3px;
  margin-right: 10px;
}
.oper-table-btnn {
  display: inline-block;
  color: #c0c4cc;
  margin: 0 3px;
  border-radius: 9px;
  padding: 0 3px;
  border: 1px solid #c0c4cc;
  cursor: not-allowed;
}
.red {
  color: #e90000;
}
.green {
  color: #02b378;
}
.blue {
  color: #e97700;
}
.black {
  color: #007fff;
}
.stop {
  color: #e90000;
}
.brown {
  color: brown;
}
</style>
